<template>
  <div id="order_index">
    <div class="order_index_item">
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <el-order_item :list1="orderStatusData"></el-order_item></div
        ></el-col>
      </el-row>
    </div>
    <div class="order_index_item_2">
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <el-order_table :dataList="list"></el-order_table></div
        ></el-col>
      </el-row>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="theStatusValue.page"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="theStatusValue.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//引入组件
const order_item = () => import("@/components/order/order_item.vue");
const order_table = () => import("@/components/order/order_table.vue");
//引入api
import { getOrderData, getOrderdetail } from "@/network/api/order/order";
export default {
  name: "order_index",
  components: {
    "el-order_item": order_item,
    "el-order_table": order_table,
  },
  data() {
    return {
      orderStatusData: {},
      list: [],
      total: 0, //总页数
      theStatusValue: {
        dateLimit: "", //默认空,时间
        page: 1, //当前页
        limit: 20, //分页
        status: "all", //状态值
        orderNo: "", //订单值
      },
    };
  },
  created() {
    //监听send事件
    this.$mitt.on("send", (args) => {
      let { dateItem, input2, tabPosition } = args;
      this.theStatusValue.dateLimit = dateItem;
      this.theStatusValue.status = tabPosition;
      this.theStatusValue.orderNo = input2;
      this.getDataList();
      this.getdetail();
    });
    this.$mitt.on("sendCode", (arg) => {
      if (arg == 200) {
        this.getdetail();
      }
    });
    this.getDataList();
    this.getdetail();
  },
  methods: {
    async getDataList() {
      let { dateLimit } = this.theStatusValue;
      let res = await getOrderData(dateLimit);
      this.orderStatusData = res.data.data;
    },
    async getdetail() {
      let { dateLimit, page, limit, status, orderNo } = this.theStatusValue;
      let res = await getOrderdetail(status, dateLimit, orderNo, page, limit);
      this.list = res.data.data.list;
      this.total = res.data.data.total;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.theStatusValue.limit = val;
      this.getdetail();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.theStatusValue.page = val;
      this.getdetail();
    },
  },
};
</script>

<style lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.order_index_item_2 {
  margin-top: 20px;
}
.block {
  display: flex;
  flex-direction: row-reverse;
  background-color: #fff;
  padding-bottom: 30px;
  box-sizing: border-box;
  padding-right: 20px;
}
.el-row {
  margin-bottom: 0;
}
</style>